<!DOCTYPE html>
<!--
 File:      dev_tools.html
 Author:    Henry Feild
 Date:      12-Jul-2012
 Purpose:   Displays a number of development and debugging tools.

%%LICENSE%%
Version: %%VERSION%%
-->
<html>
<head>
    <link rel="shortcut icon" type="image/png"
        href="../css/img/crowdlogger-logo.001.16x16.png"/>
    <title>Dev Tools</title>
    <link href="../css/dialog.css" rel="stylesheet" type="text/css">
    <script src="../js/external_lib/jquery.min.js"></script>
    <script src="../js/dialog.js"></script>
    <script src="../html-js/dev_tools.js"></script>

</head>
<body>
<span class="hidden" id="init"></span>
<div class="bodyWrapper">
    <!-- Header. -->
    <div class="header">
        <div class="title with-logo"> 
            <span class="logo-version version titleSub">version %%VERSION%%</span>
            <img class="logo" src="../css/img/crowdlogger-logo.002.png"/>
            <span class="titleMain">Dev Tools</span>
        </div>
    </div>


    <!-- Brings us down to just below the title. -->
    <div style="clear: both;"></div>
    <div class="headerBuffer"></div>

    <!-- Run multiple experiments. -->
    <div class="tools section">
        <a name="experiments"></a>
        <h1>Tools</h1>
        These don't make much sense with the current version of %%PROJECT_NAME%%, but they will in future versions when we enable aggregating data across users in a privacy preserving manner.
        <div id="experiment-central">
            <div class="entry">
                <h2>Passphrase</h2>
                <form name="preferences" onsubmit="return false;">
                    Enter here: <input type="text" id="pass_phrase"
                        name="pass_phrase" size="30" />
                    <span>  <!-- class="buttonPanel"> -->
                        <button 
                        id="passphrase_save_button">Save</button>
                    </span>
                </form>
            </div>
            <div class="entry">
                <h2>Experiments</h2>
                <span>  <!-- class="buttonPanel"> -->
                    <button 
                    id="clear_experiments">Clear ran experiments
                    </button>

                    <button  
                    id="check_for_experiments">Check for new experiments</button>

                    <button  id="clear_and_check_experiments">
                        Clear ran exp. AND check for new ones
                    </button>

                </span>
            </div>
        </div>
    </div>

    <!-- Artifact extractors. -->
    <div class="tools section">
        <a name="extractors"></a>
        <h1>Artifact Extractors</h1>
        <div id="artifact-extractors">
        </div>
    </div>

    <!-- Test CLRM loading. -->
    <div class="tools section">
        <a name="clrm"></a>
        <h1>CrowdLogger Remote Module Loading Test</h1>
        <div id="clrm-loading">
            Add the URL of the JS file to load:<br/>
            <input style="width: 200px" type="text" id="clrm-url" 
                value="http://localhost:8000/demo.json"/> 
            <button id="load-clrm">Load</button>
            <span id="clrm-success" style="display: none; color: green;">Success</span>
            <span id="clrm-error" style="display: none; color: red;">ERROR</span>
        </div>

        <br/>

        <button id="open-clrm-logging-window">Open CLRM logging window</button>
    </div>



    <!-- Everything below here is for the footer. -->
    <div class="buffer">
    </div>
        
    <div class="footer" >
        <div class="copyright">
        %%LICENSE_WEB%%
        </div>
    </div>
</div>
<div class="emptyFooter">
</div>
</body>
</html>
